<template>
  <div id="traffic">
    <div class="trafficBgc">
      <h2>流量详情</h2>
    </div>
    <!--日期选择器-->
    <div class="date-piceher">
      <date-picker></date-picker>
    </div>
    <!--表格-->
    <div id="c1" ref="c11"></div>
    <!--页脚-->
    <div class="footer">
      <footer-one></footer-one>
    </div>
  </div>
</template>
<script>
  import G2 from 'g2' //
  import DatePicker from '../../components/firmware/datepicke.vue'
  import FooterOne from '../../components/firmware/footer.vue'
  export default{
    name:'traffic',
    data(){
      return {
        chart: null,//
        screenHeight: window.screen.height - 150,
        charData: [],
      }
    },
    //注册组件
    components:{FooterOne,DatePicker},
    //实例加载完执行函数
    mounted(){
      //设置模块高度
      document.getElementById('traffic').style.height=this.screenHeight+"px";//页面初始化
      this.drawChart();
    },
    methods:{
      drawChart: function (charData) {
          console.log(6666666)
        // 如果图形存在则删除再创建，这个地方感觉稍微有点坑
        // 具体的G2 api函数说明请看上面提供的官网地址，此处不再逐一说明
        this.chart && this.chart.destroy();
        let data = [
          {"genre": "5-1",'sold':'10', "ACME": 162},
          {"genre": "5-2", 'sold':'18',"ACME": 134},
          {"genre": "5-3",'sold':'21', "ACME": 116},
          {"genre": "5-4",'sold':'35', "ACME": 122},
          {"genre": "5-5",'sold':'45', "ACME": 178},
          {"genre": "5-6",'sold':'55', "ACME": 144},
          {"genre": "5-7",'sold':'19', "ACME": 125},
          {"genre": "5-8",'sold':'71', "ACME": 176},
          {"genre": "5-9",'sold':'18', "ACME": 156},
          {"genre": "5-10",'sold':'90', "ACME": 195},
          {"genre": "5-11",'sold':'10', "ACME": 215},
          {"genre": "5-12",'sold':'21', "ACME": 176},
          {"genre": "5-13",'sold':'12', "ACME": 167},
          {"genre": "5-13",'sold':'13', "ACME": 142},
          {"genre": "5-13",'sold':'14', "ACME": 117},
          {"genre": "5-13",'sold':'15', "ACME": 113},
          {"genre": "5-13",'sold':'16', "ACME": 132},
          {"genre": "5-13",'sold':'17', "ACME": 146},
          {"genre": "5-13",'sold':'18', "ACME": 169},
          {"genre": "5-13",'sold':'19', "ACME": 184}
        ];
        this.chart = new G2.Chart({
          id: 'c1',
          width: 700,
          forceFit: true,
          height: 400
        });
        this.chart.source(data, {
          genre: {
            alias: '日期', // 列定义，定义该属性显示的别名
            range: [0, 1],
            tickInterval: 1,
          },
          sold: {
            alias: '使用流量',//名称设置
            formatter: function(val) {
              return val + 'G'; //添加单位
            },
            type: 'linear',
            min: 0,
            max: 100,//最大刻度值
          }
        });
        this.chart.area().position('genre*sold').color('#FF934A').shape('smooth');
        this.chart.line().position('genre*sold').color('#FF7A3F').size(2).shape('smooth');
        this.chart.animate(false);
        this.chart.render();
      }
    },
    //监听
    watch:{
      screenHeight (val) {
        this.screenHeight = val
        document.getElementById('traffic').style.height = this.screenHeight -150 + "px";//检测窗口的大小，并赋值
      },
      charData:{
        handler(val , oldVal){
          console.log('new: %s, old: %s', val, oldVal);
          this.drawChart(val);

        },
        deep:true
      },
    }
  }
</script>
<style scoped>
  #traffic{
    width: 100%;
    margin: auto;
  }
  #c1{
    max-width: 900px;
    margin:2rem auto ;
  }
  .trafficBgc{
    background: url("../../assets/bg_background.png") no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    display: table;
    height: 20%;
    margin: auto;
    width: 100%;
  }
  .trafficBgc h2{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 2.0rem;
    font-weight: 100;
    letter-spacing:2px;
  }
  .date-piceher{
    margin: 1rem 0 0 0;
  }
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom:0;
    min-width: 1200px;
  }

</style>

